(function (window) {
	'use strict';
	let filters = {
		all (todos) {
			return todos;
		},
		active (todos) {
			return todos.filter(todo => !todo.completed);
		},
		completed (todos) {
			return todos.filter(todo => todo.completed);
		}
	};
	const TODOS_KEY = 'todos-vue';
	let todoStorage = {
		get () {
			return JSON.parse(localStorage.getItem(TODOS_KEY)) || [];
		},
		set (todos) {
			localStorage.setItem(TODOS_KEY,JSON.stringify(todos));
		}
	};
	new Vue({
		el: '#app',
		data: {
			todos: todoStorage.get(),
			newTodo:'',
			editingTodo: null,
			titleBeforeEdit: '',
			todoType: 'all'
		},
		computed: {
			// 用于获取待办事项个数
			remaining () {
				return filters['active'](this.todos).length;
			},
			allDone: {
				get: function () {
					return this.remaining === 0;
				},
				set: function (value) {
					// value代表全部切换选框的状态
					this.todos.forEach(function (todo) {
						todo.completed = value;
					})
				}
			},
			filteredTodo () {
				return filters[this.todoType](this.todos);
			}
		},
		methods: {
			// 进行单位复数处理函数
			pluralize: function (word) {
				return word + (this.remaining === 1 ? '' : 's');
			},
			addTodo: function () {
				var value = this.newTodo.trim();
				if (!this.newTodo) {
					return;
				}
				this.todos.push({ id: this.todos.length + 1, title: value,completed: false});
				this.newTodo = '';
			},
			removeTodo: function (todo) {
				var index = this.todos.indexOf(todo);
				this.todos.splice(index, 1);
			},
			removeCompleted: function () {
				this.todos = filters['active'](this.todos);
			},
			editTodo: function (todo) {
				this.editingTodo = todo;
				this.titleBeforeEdit = todo.title;
			},
			cancelEdit: function (todo) {
				this.editingTodo = null;
				todo.title = this.titleBeforeEdit;
			},
			editDone (todo) {
				if (!this.editingTodo) return;
				this.editingTodo = null;
				todo.title = todo.title.trim();
				if (!todo.title) {
					this.removeTodo(todo);
				}
			}
		},
		directives: {
			'todo-focus': function (el,binding) {
				if (binding.value) {
					el.focus();
				}
			}
		},
		watch: {
			todos: {
				deep: true,
				handler: todoStorage.set
			}
		}
	})
	
})(window);
